<script>
import Amount from "./Amount.vue";
export default {
  name: "cart item",
  props: {
    ordinal: {
      type: Number,
      required: true,
    },
    id: {
      type: Number,
      required: true
    },
    name: {
      type: String,
      required: true,
    },
    price: {
      type: Number,
      required: true,
    },
    amount: {
      type: Number,
      required: true,
    }
  },
  computed: {
    subTotal() {
      return (this.price * this.amount).toFixed(2);
    },
  },
  components: {
    Amount,
  },
  methods: {
    remove() {
      this.$bus.emit( '删除商品', this.id );
    }
  }
};
</script>

<template>
  <el-row class="cart-item" align="middle">
    <el-col :span="3" class="ordinal">{{ ordinal }}</el-col>
    <el-col :span="9" class="name">{{ name }}</el-col>
    <el-col :span="3" class="price">{{ price.toFixed(2) }}</el-col>
    <el-col :span="3" class="amount">
      <Amount :id="id" :count="amount" />
    </el-col>
    <el-col :span="3" class="sub-total">{{ subTotal }}</el-col>
    <el-col :span="3" class="operation">
      <el-button type="primary" size="small" @click="remove">删除</el-button>
    </el-col>
  </el-row>
</template>

<style lang="less">
@height: 40px;
.cart-item {
  height: @height;
  border: 1px solid #dfdfdf;
  margin: 10px;
}
.cart-item > .ordinal {
  text-align: center;
}

.cart-item > .name {
  text-align: left;
}

.cart-item > .price {
  text-align: center;
}

.cart-item > .amount {
  text-align: center;
}

.cart-item > .sub-total {
  text-align: center;
}

.cart-item > .operation {
  text-align: center;
}
</style>